<template>
  <div>
    <scEcharts :style="{ width: '100%', height: '250px' }" :option="option" @contentByTooltip="contentByTooltip">
    </scEcharts>
  </div>
  <Dialog :dialogTableVisible="dialogTableVisible" :gridData="gridData" @handleClose="handleClose"
    :title="title + '报告阅读量'">
    <template #valueBox>
      <div v-if="showValueBox">
        <chart6_1_2 />
      </div>
    </template>
  </Dialog>
</template>

<script>
import scEcharts from "@/components/scEcharts";
import * as echarts from "echarts";
import Dialog from "./dialog.vue"
import chart6_1_2 from "./chart6_1_2"
export default {
  components: {
    scEcharts, Dialog, chart6_1_2
  },
  data() {
    return {
      dialogTableVisible: false,
      showValueBox: false,
      title: '',
      gridData: [
        {
          id: 'UC001',
          name: '超级管理员',
          program: '1180802211608249',
          programName: '丙型肝炎HCV病毒载里内标定里检测英光录量PCR)超敏',
          num: '2'
        },
        {
          id: 'UC001',
          name: '超级管理员',
          program: '1180802211608249',
          programName: '甲状旁腺素(PTH)电化学发光法)',
          num: '1'
        },
        {
          id: 'UC001',
          name: '超级管理员',
          program: '1180802211608249',
          programName: '丙型肝炎RNA(HCV-RNA]荧光定里(PCR)',
          num: '5'
        },
        {
          id: 'UC001',
          name: '超级管理员',
          program: '1180802211608249',
          programName: '促黄体生成素(LH)(化学发光法)',
          num: '1'
        },
      ],

      option: {
        grid: {
          top: "60px",
        },
        legend: {
          data: ["CT", "MR", "DR", "彩色超声"],
          right: 32, //调整图例位置
          top: 14, //调整图例位置
          itemHeight: 10, //修改icon图形大小
          icon: "circle",
          formatter: function (_name) {
            return `{a|${_name}}`;
          },
          textStyle: {
            color: "#333333",
            fontSize: 12,
            rich: {
              a: {
                verticalAlign: "middle",
                padding: [4, 0, 0, 0],
              },
            },
          },
        },
        // label: {
        //     show: true, // 是否显示
        //     position: "top", // 数值显示的位置
        //     fontSize: 12,
        //     color: '#888888'
        // },
        tooltip: {
          trigger: "axis",
          textStyle: {
            fontSize: 12 // 字体大小
          },
        },
        xAxis: {
          type: "category",
          data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
          axisLabel: {
            interval: 0,
            rotate: 0, //设置标签倾斜
            color: "#333333",
            fontSize: 12,
            margin: 12,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#e6e6e6",
            },
          },
        },
        yAxis: {
          type: "value",
          name: "",
          position: "left",
          alignTicks: true,
          axisLine: {
            show: false,
            lineStyle: {
              color: "#e6e6e6",
            },
          },
          axisLabel: {
            formatter: "{value} %",
            interval: 0,
            rotate: 0, //设置标签倾斜
            color: "#333333",
            fontSize: 12,
          },
        },

        series: [
          {
            name: "CT",
            data: [86, 88, 83, 91, 94, 86, 88, 83, 91, 94, 86, 88],
            type: "bar",
            barCategoryGap: "30%",
            itemStyle: {
              borderRadius: [4, 4, 0, 0]
            },
            color: {
              type: "linear",
              x: 0, //右
              y: 0, //下
              x2: 0, //左
              y2: 1, //上
              colorStops: [
                {
                  offset: 0,
                  color: "#0984e3", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#74b9ff", // 100% 处的颜色
                }
              ]
            }
          },
          {
            name: "MR",
            data: [96, 96, 99, 94, 95, 96, 96, 99, 94, 95, 96, 96],
            type: "bar",
            barCategoryGap: "30%",
            itemStyle: {
              borderRadius: [4, 4, 0, 0]
            },
            color: {
              type: "linear",
              x: 0, //右
              y: 0, //下
              x2: 0, //左
              y2: 1, //上
              colorStops: [
                {
                  offset: 0,
                  color: "#00cec9", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#81ecec", // 100% 处的颜色
                }
              ]
            }
          },
          {
            name: "DR",
            data: [83, 83, 84, 84, 83, 83, 83, 84, 84, 83, 83, 83],
            type: "bar",
            barCategoryGap: "30%",
            itemStyle: {
              borderRadius: [4, 4, 0, 0]
            },
            color: {
              type: "linear",
              x: 0, //右
              y: 0, //下
              x2: 0, //左
              y2: 1, //上
              colorStops: [
                {
                  offset: 0,
                  color: "#6c5ce7", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#a29bfe", // 100% 处的颜色
                }
              ]
            }
          },
          {
            name: "彩色超声",
            data: [88, 88, 100, 94, 97, 88, 88, 100, 94, 97, 88, 88],
            type: "bar",
            barCategoryGap: "30%",
            itemStyle: {
              borderRadius: [4, 4, 0, 0]
            },
            color: {
              type: "linear",
              x: 0, //右
              y: 0, //下
              x2: 0, //左
              y2: 1, //上
              colorStops: [
                {
                  offset: 0,
                  color: "#fdcb6e", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#ffeaa7", // 100% 处的颜色
                }
              ]
            }
          }
        ]
      }
    }
  },
  methods: {
    contentByTooltip(params) {
      console.log("params", params); // 初始状态
      this.dialogTableVisible = true; // 更新状态
      this.title = params.name;
      this.showValueBox = false; // 先隐藏
      setTimeout(() => {
        this.showValueBox = true; // 延迟显示
      }, 100);
    },
    handleClose(params) {
      this.dialogTableVisible = false;
    }
  }
}
</script>

<style></style>
